<template>
  <div>
    <div class="search1">
      <div class="title">
        <span class="el-icon-search"></span>
        <span>筛选搜索</span>
      </div>
      <div>
        <SupInput :InpList="InpList" :BtnList="BtnList" @clickFn="btnFn" />
      </div>
    </div>
    <div>
      <div class="shuju">
        <span class="el-icon-tickets"></span>
        <span> 数据列表</span>
        <span class="right">
          <el-button type="primary" size="small" @click="addfn()"
            >添加</el-button
          ></span
        >
        <span class="clear"></span>
      </div>
    </div>
    <Suptable
      :isImg="true"
      :headerData="headerData"
      :tableData="tableData"
      :total="total"
      :pagesizeList="fenye"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :isTag="true"
      :TagName="TagName"
    >
      <template v-slot:imgSlot="{ row }">
        <div>
          <img :src="row.row.logo" alt="" width="100" height="50" />
        </div>
      </template>
      <template v-slot:tagSlot="{ row }">
        <el-switch
          v-model="row.row.showStatus"
          @change="changState(row.row.showStatus, row.row.id)"
        >
        </el-switch>
      </template>
      <template v-slot:opera="{ row }">
        <el-button type="primary" @click="editClick(row.row)" size="small"
          >编辑</el-button
        >
        <el-button type="danger" @click="delClick(row.row.id)" size="small"
          >删除</el-button
        >
      </template>
    </Suptable>
    <div>
      <el-dialog
        :title="isEdit ? '修改信息' : '添加'"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="品牌名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="品牌首字母" prop="firstLetter">
              <el-input v-model="ruleForm.firstLetter"></el-input>
            </el-form-item>
            <el-form-item label="品牌故事" prop="brandStory">
              <el-input v-model="ruleForm.brandStory"></el-input>
            </el-form-item>
            <el-form-item label="编号" prop="id">
              <el-input v-model="ruleForm.id"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="productCount">
              <el-input v-model="ruleForm.productCount"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >确认</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  brandList,
  detBrand,
  queryBrand,
  editBrandShow,
  editBrand,
  addBrand,
} from "@/api/brandMock.js";
import Suptable from "@/components/Suptable";
import SupInput from "@/components/SupInput";
export default {
  name: "classgoods",
  data() {
    return {
      editId: "",
      isEdit: false,
      dialogVisible: false,
      TagName: "是否显示",
      ruleForm: {
        brandStory: "",
        name: "",
        firstLetter: "",
        productCount: "",
        id: "",
      },
      rules: {
        name: [{ required: true, message: "请输入品牌名称", trigger: "blur" }],
      },
      headerData: [
        {
          prop: "brandStory",
          label: "品牌故事",
        },
        {
          prop: "firstLetter",
          label: "品牌首字母",
        },
        {
          prop: "id",
          label: "编号",
        },
        {
          prop: "name",
          label: "品牌名称",
        },
        {
          prop: "productCount",
          label: "数量",
        },
      ],
      tableData: [],
      pagesize: 10,
      pagenum: 1,
      total: 0,
      fenye: [5, 10, 15, 20],
      InpList: [
        {
          model: "",
          text: "请输入关键字/品牌",
        },
      ],
      BtnList: [
        {
          icon: "el-icon-search",
          name: "查找结果",
        },
      ],
    };
  },
  mounted() {
    let _self = this;
    _self.addbrand();
  },

  methods: {
    // 添加品牌
    addfn(){
      let _self =this;
      _self.isEdit = false
      _self.dialogVisible = true;
      _self.ruleForm = {
        brandStory: "",
        name: "",
        firstLetter: "",
        productCount: "",
        id: "",
      }
    },
    submitForm(formName) {
      let _self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!_self.isEdit) {
            let { brandStory, name, firstLetter, productCount,id} = _self.ruleForm;
            let data = {
              brandStory: brandStory,
              name: name,
              firstLetter: firstLetter,
              productCount:productCount,
              id:id
            };
            addBrand(data).then((res) => {
              console.log(res);
              if (res.meta.status == "200") {
                _self.dialogVisible = false;
                _self.$refs[formName].resetFields();
                _self.addbrand();
              } else {
                _self.$message(res.meta.msg);
              }
            });
          } else {
            let data = {
              brandStory: _self.ruleForm.brandStory,
              firstLetter: _self.ruleForm.firstLetter,
              name: _self.ruleForm.name,
              productCount: _self.ruleForm.productCount,
              id: _self.ruleForm.id,
            };
            editBrand(data).then((res) => {
              console.log(res);
              if (res.meta.status == 200) {
                _self.addbrand();
                _self.$message("更改成功");
                _self.dialogVisible = false;
                _self.$refs[formName].resetFields();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //   编辑品牌
    editClick(row) {
      let _self = this;
      console.log(row);
      _self.isEdit = true;
      _self.dialogVisible = true;
      _self.ruleForm.brandStory = row.brandStory;
      _self.ruleForm.firstLetter = row.firstLetter;
      _self.ruleForm.name = row.name;
      _self.ruleForm.productCount = row.productCount;
      _self.ruleForm.id = row.id;
    },
    //   删除品牌
    delClick(id) {
      let _self = this;
      // 用户的删除必须先提示
      _self
        .$confirm("确定删除吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          let data = { id };
          detBrand(data).then((res) => {
            if (res.meta.status == 200) {
              _self.$message({
                type: "success",
                message: "删除成功!",
              });
              _self.addbrand();
            } else {
              _self.$message({
                type: "info",
                message: res.meta.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //   是否修改显示
    changState(showStatus, id) {
      let _self = this;
      showStatus = showStatus ? 0 : 1;
      let data = { showStatus, id };
      editBrandShow(data).then((res) => {
        console.log(res);
        if (res.meta.status == 200) {
          _self.$message(res.meta.msg);
        }
      });
    },
    handleSizeChange(val) {
      let _self = this;
      _self.pagesize = val;
      _self.addbrand();
    },
    handleCurrentChange(val) {
      let _self = this;
      _self.pagenum = val;
      _self.addbrand();
    },
    addbrand() {
      let _self = this;
      let data = {
        pagesize: _self.pagesize,
        pagenum: _self.pagenum,
      };
      brandList(data).then((res) => {
        console.log(res);
        let _self = this;
        _self.tableData = [];
        for (let item of res.data.user) {
          let ReviewData = {
            brandStory: item.brandStory,
            firstLetter: item.firstLetter,
            id: item.id,
            name: item.name,
            logo: item.logo,
            productCount: item.productCount,
          };
          _self.tableData.push(ReviewData);
        }
        _self.total = res.data.total;
        _self.pagenum = res.data.pagenum;
      });
    },
    btnFn(index) {
      let _self = this;
      if (index == 0) {
        let data = {
          name: _self.InpList[0].model,
        };
        queryBrand(data).then((res) => {
          console.log(res);
          if (res.meta.status == 200) {
            _self.tableData = res.data.arr;
            // for (let item of res.data.arr) {
            //   let ReviewData = {
            //     brandStory: item.brandStory,
            //     firstLetter: item.firstLetter,
            //     id: item.id,
            //     name: item.name,
            //     logo: item.logo,
            //     productCount: item.productCount,
            //   };
            //   _self.tableData.push(ReviewData);
            // }
          } else {
            _self.addbrand();
          }
        });
      }
    },
  },
  components: {
    Suptable,
    SupInput,
  },
};
</script>
<style scoped>
.search1 {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 10px;
}
.title{
  margin-bottom: 20px;
}
.shuju {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #ebeef5;
  border-radius: 10px;
}
.right {
  float: right;
}
.clear {
  clear: both;
}
</style>